<template>
	<view class="setting">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">
					设置
				</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>

		<view class="tab-list">
			<view class="list-item" v-for="(item,index) in tabList" :key="index" @tap="navTo(item,item.isLogin)">
				<view>
					<text>{{item.title}}</text>
				</view>
				<view>
					<u-icon name="arrow-right" color="#999" size="30upx"></u-icon>
				</view>
			</view>
			<view class="list-item">
				<view>
					版本号
				</view>
				<view>{{app_verison_id}}</view>
			</view>
		</view>

		<view class="submit-bottom" v-show="hasLogin">
			<view class="submit-btn" @tap="outLogin">退出登录</view>
		</view>
	</view>
</template>
<script>
	import {
		logout,
	} from '@/api/login.js'

	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
    APP_VERSION_ID
	} from '@/common/config.js';
	export default {
		data() {
			return {
				message: false,
				tabList: [{
						title: '个人资料',
						path: '/pages/setting/account',
						isLogin: true,
					},
					{
						title: '账户与安全',
						path: '/pages/setting/accountSecurity',
						isLogin: true,
					},
					{
						title: '用户协议',
						path: '/pages/login/agreement?type=zhucexieyikey',
						isLogin: false
					},
					{
						title: '隐私政策',
						path: '/pages/login/agreement?type=yinsixieyikey',
						isLogin: false
					},
				],
			}
		},
		computed: {
			...mapState(["hasLogin", "uerInfo"]),
			app_verison_id: function(){
				return APP_VERSION_ID;
			}
		},
		methods: {
			// 退出登录
			outLogin() {
				logout().then(res => {
					if (res.data.success) {
						this.$store.dispatch("OutLogin");
						uni.reLaunch({
							url: "/pages/login/login"
						});
					}
				})
			},
			navTo(cur, flag) {
				let url = cur.path;
				if (flag && !this.hasLogin) {
					uni.navigateTo({
						url: "/pages/login/login"
					});
					return;
				} else if (cur.title == "实名认证" && this.uerInfo.isRealName == 0) {
					url = url + `?phone=${this.uerInfo.mobile}`;
				} else if (cur.title == "实名认证" && this.uerInfo.isRealName == 1) {
					url = `/pages/setting/account`;
				} else if ((cur.title == "我的银行卡" || cur.title == "开户") && this.uerInfo.isRealName == 0) {
					this.$u.toast('请先实名认证！');
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.setting {
		padding-top: 120upx;
		color: #333;

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

		.tab-list {
			padding: 2upx 30upx;
			background-color: #fff;
			margin-bottom: 20upx;
			font-size: 30upx;

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32upx;
				padding-bottom: 32upx;
				border-bottom: 2upx solid #F7F7F7;
				line-height: 30upx;
				font-weight: 400;
				height: 62upx;

				>view {
					display: flex;
					align-items: center;
				}

				.icon_img_right {
					// width: 24upx;
					height: 20upx;
				}
			}

			.list-item:last-child {
				border-bottom: 0;
			}
		}

		.submit-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 90upx;
			background-color: #fff;

			.submit-btn {
				width: 100%;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #010101;
				text-align: center;
			}
		}

	}
</style>
